<template>
    <el-dialog
        v-model="userDetailVisible"
        title="用户详情"
        @close="handleClose"
        center
        draggable
        align-center
    >
        <div class="user-detail">
            <el-card>
                <template #header>
                    <div class="card-header">
                        <el-text type="primary">基本信息</el-text>
                    </div>
                </template>
                <el-row :gutter="1">
                    <div class="logo-preview" v-if="userDetail.avatar">
                        <div class="logo-box">
                            <el-avatar :src="userDetail.avatar" />
                        </div>
                    </div>
                    <el-col :span="24">用户头像: {{ userDetail.avatar }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">用户ID: {{ userDetail.id }}</el-col>
                    <el-col :span="12">用户名称: {{ userDetail.name }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">用户性别: {{ userDetail.sexDesc }}</el-col>
                    <el-col :span="12">用户部门: {{ userDetail.deptName }}</el-col>
                </el-row>
            </el-card>
            <el-card>
                <template #header>
                    <div class="card-header">
                        <el-text type="success">联系方式</el-text>
                    </div>
                </template>
                <el-row>
                    <el-col :span="12">用户邮箱: {{ userDetail.email }}</el-col>
                    <el-col :span="12">联系电话: {{ userDetail.phoneNumber }}</el-col>
                </el-row>
            </el-card>
            <el-card>
                <template #header>
                    <div class="card-header">
                        <el-text type="info">附加信息</el-text>
                    </div>
                </template>
                <el-row>
                    <el-col :span="12" :offset="10"
                        >账号状态:
                        <el-tag v-if="userDetail.status" type="success">
                            {{ userDetail.statusDesc }}
                        </el-tag>
                        <el-tag v-else type="danger">
                            {{ userDetail.statusDesc }}
                        </el-tag>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">创建人: {{ userDetail.createBy }}</el-col>
                    <el-col :span="12">创建时间: {{ userDetail.createTime }}</el-col>
                </el-row>
                <el-row v-if="userDetail.loginIp">
                    <el-col :span="12">最后登录IP: {{ userDetail.loginIp }}</el-col>
                    <el-col :span="12">最后登录时间: {{ userDetail.loginTime }}</el-col>
                </el-row>
                <el-row v-if="userDetail.updateBy">
                    <el-col :span="12">更新人: {{ userDetail.updateBy }}</el-col>
                    <el-col :span="12">更新时间: {{ userDetail.updateTime }}</el-col>
                </el-row>
                <el-row v-if="userDetail.remark">
                    <el-col :span="24">备注: {{ userDetail.remark }}</el-col>
                </el-row>
            </el-card>
        </div>
    </el-dialog>
</template>

<script setup>
import { reactive, watch, inject } from 'vue'

const { userDetailVisible, selectedRow } = inject('userDetail')

const userDetail = reactive({
    id: undefined,
    deptId: undefined,
    deptName: undefined,
    name: undefined,
    email: undefined,
    phoneNumber: undefined,
    sex: undefined,
    sexDesc: undefined,
    password: undefined,
    avatar: undefined,
    status: undefined,
    statusDesc: undefined,
    loginIp: undefined,
    loginTime: undefined,
    createTime: undefined,
    updateBy: undefined,
    updateTime: undefined,
    remark: undefined
})

// 重置 userDetail 的函数
const resetUserDetail = () => {
    Object.keys(userDetail).forEach((key) => {
        userDetail[key] = undefined
    })
}
// 处理对话框关闭事件
function handleClose() {
    resetUserDetail()
}
watch(
    () => selectedRow.value,
    (newValue) => {
        if (newValue) {
            Object.assign(userDetail, newValue)
        }
    },
    { immediate: true } // 立即以当前路由的值为触发条件
)
</script>

<style lang="scss" scoped>
.user-detail {
    background-color: #f5f5f5;
    padding: 20px;
    & .el-card {
        @include border();
        margin-bottom: 15px;
        & .el-row {
            margin-bottom: 20px;
            & .logo-preview {
                margin-bottom: 30px;
                width: 800px;
                @include flex-center;
                & .logo-box {
                    width: 100%;
                    height: 100%;
                    @include grid-center;
                }
            }
        }
    }
}
</style>
